<!-- /**
* Display the page where users fill out forms.
*
* @author Xiong Keqin
* @since 2023-10-25
*/ -->
<template>
	<div>
		<center>
			<h1>{{ companyCName }}</h1>
		</center>
		<div class="app-container">

			<div class="return-button">
				<a @click="goBack">&#8592; 返回</a>
			</div>

			<div class="dialogDiv1" ref="leftDiv">
				<el-form ref="form" :model="form"  :rules="DataFillingRules" label-width="140px">

					<div class="centered-form">
					<el-form-item label="建档期就业人数" >
						<div style="display: flex; align-items: center;">

							<span class="demonstration"></span>
							<el-input class="long_input" v-model="form.p_number1" placeholder="" :disabled=true />
							<span style="color: red; font-size: 1.7em; margin-left: 0.55em;"></span>

						</div>
					</el-form-item>
					</div>


					<div class="centered-form">
					<el-form-item label="调查期就业人数"  prop="_p_number2">
						<div style="display: flex; align-items: center;">

							<span class="demonstration"></span>
							<el-input class="long_input" v-model="form.p_number2" placeholder="请输入"  @input="checkEmploymentNumbers" />
							<span style="color: red; font-size: 1.7em; margin-left: 0.1em;">*</span>

						</div>
					</el-form-item>
					</div>


					<div class="centered-form">
					<el-form-item label="就业人数减少类型" v-if="showReasonFields1" prop="_reduction_type">
						<div style="display: flex; align-items: center;">

							<span class="demonstration"></span>
							<el-cascader
								placeholder="请选择"
								class="long_input"
								v-model="form.reduction_type"
								:options="form.reduction_type_options"
								@change="handleChange" >
							</el-cascader>
							<span style="color: red; font-size: 1.7em; margin-left: 0.1em;">*</span>

						</div>
					</el-form-item>
					</div>



					<div class="centered-form">
					<el-form-item label="主要原因" v-if="showReasonFields1" prop="_main_reason">
						<div style="display: flex; align-items: center;">

							<span class="demonstration"></span>
							<el-cascader
								placeholder="请选择"
								class="long_input"
								v-model="form.main_reason"
								:options="form.main_reason_options"
								@change="handleMainReasonChange" >
							</el-cascader>
							<span style="color: red; font-size: 1.7em; margin-left: 0.1em;">*</span>

						</div>
					</el-form-item>
					</div>


					<div class="centered-form">
					<el-form-item label="次要原因" v-if="showReasonFields2" prop="_second_reason">
						<div style="display: flex; align-items: center;">

							<span class="demonstration"></span>
							<el-cascader
								placeholder="请选择"
								class="long_input"
								v-model="form.second_reason"
								:options="form.second_reason_options[form.main_reason]"
								@change="handleChange" >
							</el-cascader>
							<span style="color: red; font-size: 1.7em; margin-left: 0.1em;">*</span>

						</div>
					</el-form-item>
					</div>


					<div class="centered-form">
					<el-form-item label="第三原因" v-if="showReasonFields2" prop="_third_reason">
						<div style="display: flex; align-items: center;">

							<span class="demonstration"></span>
							<el-input class="long_input" v-model="form.third_reason" placeholder="请输入" />
							<!-- <el-input
								class="long_input"
								type="textarea"
								:rows="3"
								placeholder="请输入内容"
								v-model="form.third_reason">
							</el-input> -->
							<span style="color: red; font-size: 1.7em; margin-left: 0.55em;"></span>

						</div>
					</el-form-item>
					</div>


					<div class="centered-form">
					<el-form-item label="原因说明" v-if="showReasonFields1" prop="_reason_describe">
						<div style="display: flex; align-items: center;">

							<span class="demonstration"></span>
							<!-- <el-input class="long_input" v-model="form.reason_describe" placeholder="请输入"  /> -->
							<el-input
								class="long_input"
								type="textarea"
								:rows="4"
								placeholder="请输入内容"
								v-model="form.reason_describe">
							</el-input>
							<span style="color: red; font-size: 1.7em; margin-left: 0.1em;">*</span>

						</div>
					</el-form-item>
					</div>




					<div class="centered-form2">
						<el-form-item>
						<el-button class="custom-button" @click.native.prevent="myPerserve" style="margin-right:150px;" :disabled="this.is_Submit" > 保存修改 </el-button>
						<el-button class="custom-button" type="primary" @click.native.prevent="mySubmit" style="margin-right:150px;" :disabled="this.is_Submit" >提交</el-button>
						</el-form-item>
					</div>

				</el-form>
			</div>
			<div class="dialogDiv2" v-bind:style="{height: leftDivHeight}">
                <el-timeline>
                    <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        :icon="activity.icon"
                        :type="activity.type"
                        :color="activity.color"
                        size="large"
                    >
                        <p class="timeline-name">{{ activity.name }}</p>
                        <p class="timeline-content" v-if="activity.idea != ''">
                        <span>退回备注: </span><span class="timeline-content__idea">{{ activity.idea }}</span>
                        </p>
                        <p class="timeline-content">{{ activity.timestamp }}</p>
                    </el-timeline-item>
                </el-timeline>
            </div>

		</div>

	</div>
</template>

<script>
import { getFillingFormInfo} from '@/api/enterprise/dataFilling'
import { submitFillingFormInfo } from '@/api/enterprise/dataFilling';
import { getDataReportFormHistory } from '@/api/common/queryHistory'

export default {
	data() {
		const validateEmploymentNumbers = (rule, value, callback) => {
  			const regex = /^[0-9]+$/; // 填写一个大于等于0的整数
			if (!regex.test(this.form.p_number2)) {
				callback(new Error('请填写一个大于等于0的整数'));
			} else {
				callback();
			}
		}

		const validateReductionType = (rule, value, callback) => {
			if(this.showReasonFields1 == true){
				if(!this.form.reduction_type){
					callback(new Error('人数减少类型不能为空'));
				} else{
					//console.log((this.form.reduction_type).length)
					if ((this.form.reduction_type).length < 1) {  // 检查字段是否为空或只包含空格
						callback(new Error('请选择内容'));
					} else {
						callback();
					}
					// console.log((this.form.reduction_type).length)
					if ((this.form.reduction_type).length < 1) {  // 检查字段是否为空或只包含空格
						callback(new Error('请选择内容'));
					} else {
						callback();
					}
				}
			}
		}

		const validateMainReason = (rule, value, callback) => {
			if(this.showReasonFields1 == true){
				if(!this.form.main_reason){
					callback(new Error('主要原因不能为空'));
				} else{
					if ((this.form.main_reason).length < 1) {  // 检查字段是否为空或只包含空格
						callback(new Error('请选择内容'));
					} else {
						callback();
					}
				}
			}
		}

		const validateSecondReason = (rule, value, callback) => {
			if(this.showReasonFields2 == true){
				if(!this.form.second_reason){
					callback(new Error('次要原因不能为空'));
				} else{
					if ((this.form.second_reason).length < 1) {  // 检查字段是否为空或只包含空格
						callback(new Error('请选择内容'));
					} else {
						callback();
					}
				}
			}
		}

		const validateReasonDescribe = (rule, value, callback) => {
			if(!this.form.reason_describe){
					callback(new Error('原因描述不能为空'));
			} else{
				if ((this.form.reason_describe).trim() == '') {  // 检查字段是否为空或只包含空格
					callback(new Error('请填写内容'));
				} else {
					callback();
				}
			}
		}

		return {
			activities: [],
            leftDivHeight: '0px',

			is_Submit : 0,
			is_the_first_time:true,		// 是否是第一次填表

			showReasonFields1: false, // 是否显示填写主要原因的框
			showReasonFields2: false,
			isNumber1Get: false, // 是否建档期就业人数从数据库中获取到了
			labelPosition: 'right',
			companyCName: null,
			form: {
				p_number1: null,
        		p_number2: null,

				reduction_type: [],
				reduction_type_options: [
					{
						value: '关闭破产',
						label: '关闭破产',
					},
					{
						value: '停业整顿',
						label: '停业整顿',
					},
					{
						value: '经济性裁员',
						label: '经济性裁员',
					},
					{
						value: '业务转移',
						label: '业务转移',
					},
					{
						value: '自然减员',
						label: '自然减员',
					},
					{
						value: '正常解除或终止劳动合同',
						label: '正常解除或终止劳动合同',
					},
					{
						value: '国际因素变化影响',
						label: '国际因素变化影响',
					},
					{
						value: '自然灾害',
						label: '自然灾害',
					},
					{
						value: '重大事件影响',
						label: '重大事件影响',
					},
					{
						value: '其他',
						label: '其他',
					},
				],


				main_reason: [],
				main_reason_options: [
					{
						value: '产业结构调整',
						label: '产业结构调整',
					},
					{
						value: '重大技术改革',
						label: '重大技术改革',
					},
					{
						value: '节能减排、淘汰落后产能',
						label: '节能减排、淘汰落后产能',
					},
					{
						value: '订单不足',
						label: '订单不足',
					},
					{
						value: '原材料涨价',
						label: '原材料涨价',
					},
					{
						value: '工资、社保',
						label: '工资、社保',
					},
					{
						value: '自然减员',
						label: '自然减员',
					},
					{
						value: '其他',
						label: '其他',
					},

					{
						value: '经营资金困难',
						label: '经营资金困难',
					},
					{
						value: '税收政策变化（包括税负增加或出口退税减少等）',
						label: '税收政策变化（包括税负增加或出口退税减少等）',
					},
					{
						value: '季节性用工',
						label: '季节性用工',
					},
					{
						value: '国际因素变化',
						label: '国际因素变化',
					},
					{
						value: '招不上人来',
						label: '招不上人来',
					},
					{
						value: '正常解除或终止劳动合同',
						label: '正常解除或终止劳动合同',
					},
				],


				second_reason: [],
				second_reason_options:{
					'自然减员':[
						{
							value: '退休',
							label: '退休',
						},
						{
							value: '死亡',
							label: '死亡',
						},
						{
							value: '退职',
							label: '退职',
						},
					],

					'其他':[
						{
							value: '自行离职',
							label: '自行离职',
						},
						{
							value: '工作调动',
							label: '工作调动',
						},
						{
							value: '劳动关系转移',
							label: '劳动关系转移',
						},
						{
							value: '招不上人来',
							label: '招不上人来',
						},
					],
				},

				third_reason: null,
				reason_describe: null,

				reduction_type1: null,
				main_reason1: null,
				second_reason1: null,
			},

			DataFillingRules: {
				_p_number2: [{ trigger: "change", validator: validateEmploymentNumbers }],
				_reduction_type: [{ trigger: "change", validator: validateReductionType }],
				_main_reason: [{ trigger: "change", validator: validateMainReason }],
				_second_reason: [{ trigger: "change", validator: validateSecondReason }],
				_reason_describe: [{ trigger: "change", validator: validateReasonDescribe }],
			},





		}	//return
	},


	created() {
		// 1. 在页面加载时获取数据库数据并填充form字段
		this.getData();
  	},

	props: {
		formID: Number, // 声明 formID 为整数类型
	},

	methods: {
		handleMainReasonChange() {
			if ((this.form.main_reason == "自然减员") || (this.form.main_reason == "其他")) {
				// console.log('主要原因已更改为:', this.form.main_reason);
				this.form.second_reason = null; // 重置次要原因选择
				this.showReasonFields2 = true; // 显示次要原因字段
			} else {
				this.form.second_reason = null; // 重置次要原因选择
				this.form.third_reason = null;
				this.showReasonFields2 = false; // 隐藏次要原因字段
			}
		},

		checkEmploymentNumbers() {
			if(this.is_the_first_time == false){
				const pNumber1 = this.form.p_number1; // 建档期就业人数
				const pNumber2 = this.form.p_number2; // 调查期就业人数

				if (pNumber2 < pNumber1) {
					// 调查期就业人数少于建档期就业人数
					this.showReasonFields1 = true; // 设置显示主要原因框
					if((this.form.main_reason == "自然减员") || (this.form.main_reason == "其他")){
						this.showReasonFields2 = true; // 设置显示主要原因框
					}
					else {
						this.form.second_reason = null;
						this.form.third_reason = null;
					}
				} else {
					// 调查期就业人数大于或等于建档期就业人数
					this.showReasonFields1 = false; // 设置隐藏主要原因框
					this.showReasonFields2 = false; // 设置隐藏主要原因框
					this.form.reduction_type = null;
					this.form.main_reason = null;
					this.form.second_reason = null;
					this.form.third_reason = null;
				}
			} else {
				this.form.p_number1 = this.form.p_number2;
			}

		},

		// goBack() {
		// 	this.$emit('reload-page'); // 触发自定义事件
		// },

		goBack() {
			const newValues = {
				sList: true,
				sForm: false,
			};
			this.$emit('update-parameter', newValues); // 触发自定义事件
		},


		getData() {
			// 读入表单填写过的内容以及上一次调查期的人数
			getFillingFormInfo({"formID": this.formID}).then(response => {
				if(response.data.formStartTotalNum == null) {
					this.form.p_number1 = response.data.formEndTotalNum;
					this.form.p_number2 = response.data.formEndTotalNum;
					this.companyCName = response.data.companyChineseName;
				}
				else{
					this.form.p_number1 = response.data.formStartTotalNum;
					this.form.p_number2 = response.data.formEndTotalNum;
					if(this.form.p_number1==null) this.is_the_first_time = true;
					else this.is_the_first_time = false;

					if(!response.data.formDecreaseType) this.form.reduction_type = null;
					else this.form.reduction_type = (response.data.formDecreaseType).split('/');
					if(!response.data.formFirstReason) this.form.main_reason = null;
					else this.form.main_reason = (response.data.formFirstReason).split('/');
					if(!response.data.formSecondReason) this.form.second_reason = null;
					else this.form.second_reason = (response.data.formSecondReason).split('/');
					this.form.third_reason = response.data.formThirdReason;
					this.form.reason_describe = response.data.formReasonDescription;
					this.companyCName = response.data.companyChineseName;

					const pNumber1 = this.form.p_number1; // 建档期就业人数
					const pNumber2 = this.form.p_number2; // 调查期就业人数
					if(pNumber2 != null){
						if (pNumber2 < pNumber1) {
							// 调查期就业人数少于建档期就业人数
							this.showReasonFields1 = true; // 设置显示主要原因框

							if ((this.form.main_reason == "自然减员") || (this.form.main_reason == "其他")) {
								// console.log('主要原因已更改为:', this.form.main_reason);
								this.showReasonFields2 = true; // 显示次要原因字段
							} else if((this.form.main_reason).length > 0){
								this.showReasonFields2 = false; // 隐藏次要原因字段
							}
						} else {
							// 调查期就业人数大于或等于建档期就业人数
							this.showReasonFields1 = false; // 设置隐藏主要原因框
							this.showReasonFields2 = false; // 设置隐藏主要原因框
						}
					}

					if((response.data.formExamineStatus == 2) || (response.data.formExamineStatus == 4) || (response.data.formExamineStatus == 6) || (response.data.formExamineStatus == 7)){
						this.is_Submit = 1;
					}
					else{
						this.is_Submit = 0;
					}
				}

				this.activities = []
				getDataReportFormHistory({formId: this.formID}).then(response => {
					// console.log(response)
					// console.log(this.$refs.leftDiv.clientHeight)
					// this.$refs.rightDiv.clientHeight = this.$refs.leftDiv.clientHeight
					this.leftDivHeight = document.body.clientHeight * 0.7 + 'px'
					// console.log(this.leftDivHeight)
					var histories = response.data
					var len = response.data.length
					if (len == 0) {
						this.activities.push({
							name: "待填写",
							idea: "",
							color: "#4E97FF",
						})
					}
					for (var i = 0; i < len; ++i) {
						var historyType = histories[i].historyType
						this.activities.push({
							name: this.getHistoryName(historyType),
							idea: histories[i].historyComment,
							color: this.getHistoryColor(historyType),
							timestamp: histories[i].historyDate,
						})
					}
				})
            })

		},

		getHistoryName(historyType) {
            if (historyType == 0) {
                return "企业提交数据报表"
            } else if (historyType == 1) {
                return "市审核退回"
            } else if (historyType == 2) {
                return "市审核通过"
            } else if (historyType == 3) {
                return "省审核退回"
            } else if (historyType == 4) {
                return "省审核通过"
            }
        },

        getHistoryColor(historyType) {
            if (historyType == 0) {
                return "#4E97FF"
            } else if (historyType == 1 || historyType == 3) {
                return "#dd0000"
            } else if (historyType == 2 || historyType == 4) {
                return "#00dd00"
            }
        },



		mySubmit() {

			this.$refs.form.validate(valid => {
				if (valid) {
					this.is_Submit = 1;

					if(!this.form.reduction_type) this.reduction_type1 = null;
					else this.reduction_type1 = this.form.reduction_type.join('/');
					if(!this.form.main_reason) this.main_reason1 = null;
					else this.main_reason1 = this.form.main_reason.join('/');
					if(!this.form.second_reason) this.second_reason1 = null;
					else this.second_reason1 = this.form.second_reason.join('/');
					submitFillingFormInfo({
						formID:this.formID,

						formStartTotalNum:this.form.p_number1,
						formEndTotalNum:this.form.p_number2,
						formDecreaseType:this.reduction_type1,
						formFirstReason:this.main_reason1,
						formSecondReason:this.second_reason1,
						formThirdReason:this.form.third_reason,
						formReasonDescription:this.form.reason_describe,

						is_Submit:this.is_Submit,
					}
					).then(response => {
						this.$message('已提交!')
						// location.reload(); // 刷新当前页面
						this.goBack();
					})

				} else {
					// console.log('error submit!!')
					return false
				}
			})


		},


		myPerserve() {
			this.is_Submit = 0;

			if(!this.form.reduction_type) this.reduction_type1 = null;
			else this.reduction_type1 = this.form.reduction_type.join('/');
			if(!this.form.main_reason) this.main_reason1 = null;
			else this.main_reason1 = this.form.main_reason.join('/');
			if(!this.form.second_reason) this.second_reason1 = null;
			else this.second_reason1 = this.form.second_reason.join('/');
			submitFillingFormInfo({
				formID:this.formID,

				formStartTotalNum:this.form.p_number1,
				formEndTotalNum:this.form.p_number2,
				formDecreaseType:this.reduction_type1,
				formFirstReason:this.main_reason1,
				formSecondReason:this.second_reason1,
				formThirdReason:this.form.third_reason,
				formReasonDescription:this.form.reason_describe,

				is_Submit:this.is_Submit,
			}
			).then(response => {
				this.$message('已保存!')
			})
		},


		onCancel() {
			this.$message({
				message: 'cancel!',
				type: 'warning'
			})
		}
	}
}
</script>

<style scoped>
.line {
	text-align: center;
}

.short_input {
  width: 510px; /* 自定义宽度 */
}


.long_input {
  width: 900px; /* 自定义宽度 */
}


.centered-form {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 100vh;*/
}

.centered-form2 {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 100vh; */
}

.custom-button {
  width: 150px; /* Custom width for the buttons */
}

.return-button {
    position: absolute;
    top: 10px;
    left: 10px;
}

.return-button a {
    text-decoration: none;
    background-color: #0074d9;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
}

.return-button a:hover {
    background-color: #0056b3;
}

.dialogDiv1{
    width:85%;

    /* background:blue; */
    float:left;
}

.dialogDiv2{
    width:15%;
	border-left: 1px solid black;
    margin-left: 0;
    padding: 0;
    /* background:magenta; */
    float:right;
    display: block;
    overflow-y: scroll;
}
.dialogDiv2::-webkit-scrollbar {display:none}

</style>

